<template>
  <div class="top_title">
    <div class="_title_icon" @click="$router.push('/')"></div>
    <div class="_title_tabs" v-if="nav">
      <router-link v-if="platform==='web'" tag="div"  to="/Market" class="_title_tabs_list">MarketPlace</router-link>
      <router-link v-if="platform==='web'" tag="div"  to="/MyArtworks" class="_title_tabs_list">My Artworks</router-link>
      <router-link v-if="platform==='web'" tag="div"  to="/Record" class="_title_tabs_list">Record</router-link>
      <a v-if="platform!=='web'" @click="selectNav('/Market')" class="_title_tabs_list">MarketPlace</a>
      <a v-if="platform!=='web'" @click="selectNav('/MyArtworks')" class="_title_tabs_list">My Artworks</a>
      <a v-if="platform!=='web'" @click="selectNav('/Record')" class="_title_tabs_list">Record</a>
    </div>
    <div class="_title_use">
<!--      <div class="_title_sel">-->
<!--        <el-select :popper-append-to-body="false" v-model="value" placeholder="Select" style="height: 100%;border: none">-->
<!--          <el-option-->
<!--              v-for="item in options"-->
<!--              :key="item.value"-->
<!--              :label="item.label"-->
<!--              :value="item.value"-->
<!--          >-->
<!--          </el-option>-->
<!--        </el-select>-->
<!--      </div>-->
<!--      <div class="_title_sel" @click="onConnect">{{ value }}</div>-->
      <div class="_title_name" @click="onConnect">{{ address }}</div>
      <div class="nav" @click="nav=true">
<!--        <van-dropdown-menu>-->
          <svg viewBox="64 64 896 896" focusable="false" data-icon="menu" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M904 160H120c-4.4 0-8 3.6-8 8v64c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-64c0-4.4-3.6-8-8-8zm0 624H120c-4.4 0-8 3.6-8 8v64c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-64c0-4.4-3.6-8-8-8zm0-312H120c-4.4 0-8 3.6-8 8v64c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-64c0-4.4-3.6-8-8-8z"></path></svg>
<!--          <van-dropdown-item ref="item" class="nav-drop">-->
<!--            <van-cell center title="MarketPlace" @click="$router.push('/Market')"></van-cell>-->
<!--            <van-cell center title="My Artworks" @click="$router.push('/MyArtworks')"></van-cell>-->
<!--          </van-dropdown-item>-->
<!--        </van-dropdown-menu>-->

      </div>
    </div>
  </div>
</template>

<script setup>
    import {ref, computed} from 'vue'
    let value = ref('BSC')
    import {state, connect} from '../../dapp'
    import {useRouter} from "vue-router";
    const options = [
        {
            value: 'BSC',
            label: 'BSC',
        },
    ]
    const nav = ref(true)
    const platform = ref('web')
    if (document.body.clientWidth <= 750) {
      platform.value = 'mobile'
      nav.value = false
    }

    const router = useRouter()

    const address = computed(() => {
      var addr = ''
      if (state.connected) {
        addr = state.address.substr(0, 5) + '...' + state.address.substr(37)
      } else {
        addr = 'Connect'
      }
      return addr
    })

    async function onConnect() {
      if (!state.connected) {
        connect(true)
      }
    }

    function selectNav(name) {
      nav.value = false
      router.push(name)
      // console.log('select', i)
    }

</script>

<style scoped lang="scss">
  .top_title {
    @include flex;
    padding-top: 17px;
  }
  :deep(.el-input__inner) {
    height: 40px;
    color: #fff;
    background-color: #FCCB2F;
    border: none;
  }
  ._title_icon {
    width: 149px;
    height: 72px;
    background: url("@/assets/icon.png") no-repeat center;
    background-size: cover;
  }
  @media screen and (max-width: 750px) {
    ._title_icon {
      width: 74.5px;
      height: 36px;
    }
  }
  ._title_tabs {
    width: 0;
    flex-grow: 1;
    display: flex;
    justify-content: center;
  }
  ._title_tabs_list {
    margin-right: 34px;
    color: #AFAFAF;
    font-size: 15px;
    cursor: pointer;
  }
  .router-link-active {
    color: #F29800!important;
  }
  ._title_use {
    display: flex;
    align-items: center;
  }
  ._title_sel {
    width: 80px;
    /*height: 40px;*/
    /*color: #fff;*/
    /*background-color: #FCCB2F;*/
    /*border: none;*/
    /*font-size: 14px;*/
    /*height: 40px;*/
    /*background-color: #FCCB2F;*/
  }
  ._title_name {
    width: 120px;
    height: 40px;
    line-height: 40px;
    /*padding: 9px 13px;*/
    border-radius: 1px;
    border: 1px solid #D9D9D9;
    font-size: 14px;
    text-align: center;
    margin-left: 21px;
    cursor: pointer;
  }
  :deep(.el-input) {
    background-color: #FCCB2F;
  }
  .nav {
    display: none;
  }
  @media screen and (max-width: 750px) {
    .nav {
      display: block;
      margin-left: 10px;
    }
    .nav-drop {
      display: none !important;
    }
    ._title_tabs {
      z-index: 100;
      display: block;
      /*display: none;*/
      position: absolute;
      width: 105px;
      // height: 84px;
      height: 118px;
      right: 10px;
      top: 50px;
      /*background-color: red;*/
      flex-direction: column;
      background-color: #fff;
      background-clip: padding-box;
      border-radius: 2px;
      outline: none;
      padding-top: 10px;
      box-shadow: 0 3px 6px -4px rgb(0 0 0 / 12%), 0 6px 16px 0 rgb(0 0 0 / 8%), 0 9px 28px 8px rgb(0 0 0 / 5%);

      a {
        display: block;
        margin-right: 0;
        padding: 5px 12px;
        font-weight: 400;
        font-size: 14px;
        line-height: 22px;
        white-space: nowrap;
     }
    }
  }
</style>
